<template>
	<view class="container">
		<view class="content">
			<map style="width: 702rpx; height: 800rpx; " :scale="15" :show-location="true" :show-compass="true" class="map-content"
				:latitude="position.latitude" :longitude="position.longitude" :markers="markers" @markertap="handleOpen"
				@callouttap="handleOpen" />
			<view class="map-btn" @click="handleOpen">开始导航</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countryName:'',//地址名
				position: {
					latitude: '',
					longitude: '',
					name: '',
					address: ''
				},
			}
		},
		components: {},
		props: {},
		computed: {
			markers() {
				const {
					longitude,
					latitude
				} = this.position;
				return [
					{
						id: 0,
						latitude: 34.20, //纬度
						longitude: 108.94, //经度
						iconPath: '/static/images/maplocation.png', //显示的图标
						rotate: 0, // 旋转度数
						width: 16, //宽
						height: 20, //高
						title: '雁塔区朱雀大街南段1号', //标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '雁塔区朱雀大街南段1号', //文本
							padding: 10,
							color: '#3D3D3D', //文字颜色
							fontSize: "36rpx", //文本大小
							borderRadius: 10, //边框圆角
							bgColor: '#fff', //背景颜色
							display: 'ALWAYS', //常显
						}
					},
					
					{
						id: 0,
						latitude: 34.23, //纬度
						longitude: 108.87, //经度
						iconPath: '/static/images/maplocation.png', //显示的图标
						rotate: 0, // 旋转度数
						width: 16, //宽
						height: 20, //高
						title: '标记位置', //标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '雁塔区朱雀大街南段1号', //文本
							padding: 10,
							color: '#3D3D3D', //文字颜色
							fontSize: "36rpx", //文本大小
							borderRadius: 10, //边框圆角
							bgColor: '#fff', //背景颜色
							display: 'ALWAYS', //常显
						}
					},
					{
						id: 0,
						latitude: 34.21, //纬度
						longitude: 108.90, //经度
						iconPath: '/static/images/maplocation.png', //显示的图标
						rotate: 0, // 旋转度数
						width: 16, //宽
						height: 20, //高
						title: '雁塔区科技七路与木塔寺路交汇处东南', //标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '雁塔区科技七路与木塔寺路交汇处东南', //文本
							padding: 10,
							color: '#3D3D3D', //文字颜色
							fontSize: "36rpx", //文本大小
							borderRadius: 10, //边框圆角
							bgColor: '#fff', //背景颜色
							display: 'ALWAYS', //常显
						}
					},
				];
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options);
			//此处暂时写死，方便使用，按逻辑是从地址栏里获取到的地址名称
			options.countryName = ' ' 
			this.countryName = ''
			this.position.name = this.countryName
			this.position.latitude = options.latitude
			this.position.longitude = options.longitude
			// this.convert()//根据地址名称获取坐标
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			// 根据地址名称获取坐标
			//（！！convert() 此方法是为了后台没有返回经纬度坐标时，前台通过地址名称自己获取坐标！！）
			convert() {
				// 新建一个正逆地址解析类
				//！！！！！UniApp调用腾讯地图TMap的方法在下一篇有详细讲解！！！！！！
				// let geocoder = new TMap.service.Geocoder(); 
				// 将给定的地址转换为坐标位置
				// geocoder.getLocation({
				// 	address: this.countryName
				// }).then((result) => {
				// 	this.position.longitude = result.result.location.lng
				// 	this.position.latitude = result.result.location.lat
				// });
			},
			// 选择地图
			handleOpen() {
				let that = this
				uni.showActionSheet({
					itemList: ['高德地图'],
					success: function(res) {
						that.guide(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			guide(signMap) {
				uni.showLoading({
					title: '跳转中'
				});
				let {
					position
				} = this;
					//地点位置position.name 地点经纬度lng lat
					var lng = position.longitude;
					var lat = position.latitude;
					if (signMap == 0) {
						// 高德地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									uni.openLocation({
										latitude: Number(lat),//维度
										longitude: Number(lng),//经度
										scale: 18,//缩放比例，范围5~18，默认为18
										name: position.name ,//地址名称
										address: position.name,//地址详情
									})
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// 百度地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},

		}
	}
</script>

<style>
	.container {}

	/* 内容 */
	.content {}

	.map-content {
		width: 100%;
		height: calc(100vh - 160rpx);
	}

	.map-btn {
		width: 710rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 60rpx;
		background: #CE3B34;
		color: #fff;
		text-align: center;
		position: fixed;
		bottom: 24rpx;
		left: 20rpx;
		font-size: 32rpx;
	}
</style>

